<template>
  <el-dialog
      v-model="dialogFormVisible"
      title="新增订单"
      top="30px"
      :close-on-press-escape="false"
      :before-close="clear"
      draggable>
    <div class="info-body">
            <el-form
                ref="ruleFormRef"
                :model="form"
                :rules="addFormRules"
                label-width="120px"
                class="form-info"
            >
              <el-form-item label="订单编号" prop="no">
                <el-input placeholder="0" v-model="form.no" @change="handleChange" />
              </el-form-item>
              <el-form-item label="送水工编号" prop="workId">
                <el-select v-model="form.workId" value-key="workId" placeholder="请选择员工编号" filterable no-match-text="该员工不存在">
                  <el-option
                      v-for="item in options1"
                      :key="item.workId"
                      :label="item.label"
                      :value="item.workId"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="送水日期">
                      <el-date-picker v-model="form.date" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD"/>
              </el-form-item>

              <el-form-item label="客户编号" prop="customerId" >
                <el-select v-model="form.customerId" value-key="customerId" clearable placeholder="请选择客户编号" filterable no-match-text="该客户不存在">
                  <el-option
                      v-for="item in options2"
                      :key="item.customerId"
                      :label="item.label"
                      :value="item.customerId"
                  />
                </el-select>
              </el-form-item>

              <el-form-item label="送水数量" prop="num">
              <el-input-number v-model="form.num" :min="1"  @change="handleChange" />
              </el-form-item>
            </el-form>
    </div>
<!--    功能区-->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="clear"> 取消</el-button>
        <el-button type="primary" @click="dialogAddConfirm">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import axios from "axios";

export default {
  data() {
    return {
      dialogFormVisible: false,
      form: {
        no: 0,
        date: '',
        workId:'',
        customerId: '',
        num: 1,
      },
      options1: [],
      options2: [],
      addFormRules: {
        workId: {
          required: true, trigger: 'blur'
        },
        date: {
          required: true, trigger: 'blur'
        },
        customerId: {
          required: true, trigger: 'blur'
        },
        num: {
          required: true, trigger: 'blur'
        }
      },
    }
  },
  components: {},
  methods: {
    handleChange() {
    },
//获取员工ID列表
    getoptions1List(){
      var that=this;
      this.axios.get("/Order/selectWorkerId").then(res=>{
        let result=res;
        console.log("获取员工ID列表")
        console.log(res);
        result.forEach(element =>{
          that.options1.push({label:element,workId:element});
        });
      }).catch(function(error){
        alert("读不到呜呜")
        console.log(error);
      })
    },
    //获取客户ID列表
    getoptions2List(){
      var that=this;
      this.axios.get("/Order/selectCusId").then(res=>{
        let result=res;
        console.log("客户ID列表")
        console.log(result);
        result.forEach(element =>{
          that.options2.push({label:element,customerId:element});
        });
        console.log("赋值之后：");
        console.log(result);
      }).catch(function(error){
        alert("读不到呜呜")
        console.log(error);
      })
    },
    dialogShow() {
      this.dialogFormVisible = true;
      this.getoptions2List();
      this.getoptions1List();
    },
    dialogAddConfirm() {
      let that = this;//改变this指向
      this.$refs.ruleFormRef.validate(valid => {
        if (valid) {
          console.log(this.form)
          this.axios.post("/Order/insert", this.form).then(res => {
            console.log(res + "新增成功")
            //this.dialogFormVisible = false;
            that.$emit("updateData");
          }).catch(function (error) {
            console.log(error);
          });
        } else {
          ElMessage.error("请检查输入的信息！");
        }
      })
    },
    clear() {
      this.options1=[];
      this.options2=[];
      this.$refs['ruleFormRef'].resetFields();
      //清空表单信息和清空select得options选项
      this.dialogFormVisible = false;
    }

  }
}

</script>

<style scoped>
.info-body{
  display: flex;
  justify-content: space-around;
}
.form-info{
  display: flex;
  flex-direction: column;
}
</style>